<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import PlaylistCard from "@/components/PlaylistCard.vue";
import { usePlaylistAPI } from "@/services/playlist";
const playlistAPI = usePlaylistAPI();

const router = useRouter();

const recommendPlaylists = ref<any[]>([]);

onMounted(async () => {
  try {
    const response = await playlistAPI.getRecommendPlaylists();
    recommendPlaylists.value = response.map((playlist: any) => ({
      id: playlist.id, 
      title: playlist.name,
      coverUrl:
        playlist.cover ||
        "https://xirealm.oss-cn-beijing.aliyuncs.com/xi/20250528224042.png",
      playCount: Math.floor(Math.random() * 1000000), // 由于接口中没有播放次数，暂时保持随机数
      description: playlist.description,
      category: playlist.category,
    }));
    total.value = recommendPlaylists.value.length;
  } catch (error) {
    console.error("获取推荐歌单失败:", error);
  }
});

// 分页相关变量
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(100);

// 页码改变处理函数
const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  // TODO: 这里可以添加获取对应页数据的逻辑
};

// 格式化播放次数
const formatPlayCount = (count: number) => {
  return count > 10000 ? `${Math.floor(count / 10000)}万` : count;
};

const handlePlaylistClick = (playlistId: string) => {
  router.push(`/playlist/${playlistId}`);
};
</script>

<template>
  <div class="p-8">
    <div class="grid grid-cols-5 gap-8">
      <PlaylistCard
        v-for="playlist in recommendPlaylists"
        :key="playlist.id"
        v-bind="playlist"
        class="cursor-pointer"
        @click="handlePlaylistClick(playlist.id)"
      />
    </div>
    <!-- <div class="flex justify-center mt-8">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
      />
    </div> -->
  </div>
</template>
